<template>
    <div class="home">
        <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
        <HelloWorld msg="Welcome to Your Vue.js App" />

        <input type="button" value="测试" @click="getData">

        <!-- <div class="player-ctain">
            <EasyPlayer data-index="0" ref="easyPlayer0" :videoUrl="videoUrl" live autoplay stretch fluent
                @error="restartPlayer" @ended="restartPlayer"></EasyPlayer>
        </div> -->

        <validateCode  v-model="valiCode"/>

    </div>
</template>

<script>
// import EasyPlayer from "@easydarwin/easyplayer"
import req from '@/api/index'
import HelloWorld from '@/components/HelloWorld'
import validateCode from "@/components/validateCode.vue"
export default {
    name: 'HomeView',
    components: {
        HelloWorld,
        validateCode
        // EasyPlayer,
    },
    data() {
        return {
            videoUrl: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
            valiCode:'',
        }
    },
    watch:{
        valiCode(){
        console.log("-------------------")
        console.log(this.valiCode);
        
      }
    },
    mounted() {
        // console.log(this.$options)
    },
    methods: {
        restartPlayer() {
            // debugger;
            // const {index} = e.currentTarget.dataset;
            // const playerStr = "easyPlayer" + index;
            // let player = this.$refs.easyPlayer0;
            // console.log(player);
            // player = player.getVueInstance();
            // player.initPlayer();
        },
        async getData() {
            let data = await req({
                url: '/api/parameter/query'
            })

            console.log(data.data);
        }
    },
}
</script>

<style>
.player-ctain {
    width: 600px;
    height: 300px;
    margin-top: 20px;
}
</style>
